<template>
  <!-- 后台导航路由组件 -->
  <div class="back-nav">
    <router-link to="/back/data" active-class="active" class="nav-item"
      >平台数据</router-link
    >
    <router-link to="/back/user" active-class="active" class="nav-item"
      >平台用户</router-link
    >
    <router-link to="/back/music" active-class="active" class="nav-item"
      >平台音乐</router-link
    >
  </div>
</template>

<script>
export default {
  name: "BackNav",
};
</script>

<style lang="less" scoped>
.back-nav {
  height: 100vh;
  background-color: #333;
  padding-top: 0.5rem;
  width: 20%;

  .nav-item {
    width: 100%;
    cursor: pointer;
    font-size: 0.3rem;
    padding: 0.3rem 0;
    text-align: center;
    display: block;
    &:hover {
      color: #67c23a;
    }
    &.active {
      color: #67c23a;
    }
  }
}
</style>